<template>
	<view 	class="feature-item" 
			:class="{
				'left': index % 2 === 0,
				'right': index % 2 === 1,
			}"
			>
		<view 	class="image-frame" 
				:style="{
					background: `url(${item.url})`,
					backgroundSize: 'cover',
					backgroundPosition: 'center center',
				}">
			
		</view>
		<view class="tag-frame">
			<uv-tags text="写意" size="mini" type="primary" v-if="index % 3 === 1"></uv-tags>
			<uv-tags text="萝莉" size="mini" type="warning" v-if="index % 3 === 1"></uv-tags>
			<uv-tags text="写实" size="mini" type="success" v-else></uv-tags>
		</view>
		<view class="title zi-hide">
			云意-春风也度
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: Number,
			item: {
				default: {
					url: ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feature-item {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 6px;
		box-shadow: 0 0 3px -1px #fff;
		.title {
			font-size: 12px;
			margin-top: 20rpx;
		}
		.image-frame {
			width: 100%;
			aspect-ratio: 1 / 1;
			border-radius: 8px;
		}
		.tag-frame {
			display: flex;
			margin-top: 20rpx;
			gap: 20rpx;
		}
	}
	
	
	.left {
		animation: left-animation 0.6s;
	}
	.right {
		animation: right-animation 0.6s;
	}
	
	@keyframes left-animation {
		0% {
			transform: translateY(50%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	@keyframes right-animation {
		0% {
			transform: translateY(50%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
</style>